﻿@namespace MudBlazor.Docs.Examples


<MudGrid>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Name" Label="Name"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Mass" Label="Mass"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Electrons" Label="Electrons"/>
    </MudItem>
    <MudItem xs="12" sm="6" md="3">
        <MudTextField @bind-Value="@element.Changed" Format="yyyy/MM/dd" Label="Last Update"/>
    </MudItem>
</MudGrid>
<div class="mt-3 ml-0 d-flex">
    <div>
        <MudText>Name: @element.Name</MudText>
        <MudText>Mass: @element.Mass u</MudText>
        <MudText>Electrons: @element.Electrons</MudText>
        <MudText>Last Update: @element.Changed.ToShortDateString()</MudText>
    </div>
    <div class="d-flex ml-auto align-center">
        <MudButton Variant="Variant.Filled" OnClick="Reset">Reset Model</MudButton>
    </div>
</div>


@code {
    Atom element = new Atom { Name = "Hydrogen", Mass = 1.00794, Electrons = 1, Changed=DateTime.Today };

    // A typical POCO
    public class Atom
    {
        public string Name { get; set; }
        public double Mass { get; set; }
        public int Electrons { get; set; }
        public DateTime Changed { get; set; }
    }

    private void Reset()
    {
        element = new Atom { Name = "Hydrogen", Mass = 1.00794, Electrons = 1, Changed = DateTime.Today };
        StateHasChanged();
    }

}